那个令人头疼的瞬间

你是否也遇到过这样的场景？

你想在 VitePress 博客或者项目文档里，完整地展示一段包含了项目结构和代码的文本。比如：

结果，页面渲染得一塌糊涂。因为内容里的第一个 ```markdown 就提前“关闭”了代码块，导致后面的内容完全乱了套。

别担心，解决这个问题非常简单，而且非常优雅。

核心秘诀：增加围栏的“高度”

Markdown 渲染引擎（如 VitePress 使用的 Markdown-it）在解析代码块时，会寻找与开头匹配的闭合标记。``` 会被下一个 ``` 关闭。

这里的诀窍就是：让外层代码块的“围栏”比内部任何一个都“高”。

具体来说，如果你的内容里最多用了 3 个反引号，那就在最外层用 4 个或更多个反引号把它包起来。

像这样：

```markdown
=== Folder Structure ===

my-project
+---src
|   +---app
|   |   \---main.cpp
|   \---utils
|       \---fs.hpp
\---README.md

=== File Contents ===

====================================================
文件: README.md
====================================================
```markdown
# my-project
一个示例项目。
```

====================================================
文件: src\app\main.cpp
====================================================
```cpp
#include "utils/fs.hpp"
int main() { /* ... */ }
```
```

看，我用了 6 个反引号 `````` 作为最外层的“围栏”。这样一来，解析器就会一直寻找与之匹配的 6 个反引号作为结束，而内部所有的 3 个反引号 ``` 都会被当作普通文本原样显示。

其他选择

1. 使用波浪线 ~： 波浪线和反引号有同样的功能。你也可以用更多的波浪线来包裹内容，这在视觉上能帮你区分嵌套层次。

   ~~~~~~~~~~
   ... 你那段包含 ``` 的内容 ...
   ~~~~~~~~~~

2. 终极武器：<pre v-pre> 标签 如果遇到更复杂的嵌套或不希望任何 Markdown 语法被解析，可以直接使用 HTML 的 <pre> 标签，并为 VitePress/Vue 添加 v-pre 指令。这会告诉 Vue 跳过对这部分内容的编译，确保其原样输出。

   <pre v-pre><code>
   === Folder Structure ===
   
   ... 你所有的内容 ...
   
   </code></pre>

   这种方法最可靠，但写法上稍微繁琐一些。

总结

下次再遇到需要在文档里展示“代码块中的代码块”时，记住这个简单的原则：

外层围栏 > 内层围栏

一个简单的反引号数量增加，就能解决这个令人头疼的渲染问题，让你的文档和教程变得更加清晰和专业。快去试试吧！